﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="HomeWork/TODO.css">
    <script src="HomeWork/vue.js"></script>

</head>

<body>
    <div id="todo2">
        <div style="margin:0 auto; width:300px" >
            <input type="text" name="name" v-model.trim="componentName" @keyup.enter="addComponent(componentName)" placeholder="回车添加代办组件" />
        </div>
       
        <my-todo v-for="(todoComponent,index) in todoComponents"  :component-name="todoComponent.componentName" ></my-todo>
    </div>
    <template id="todotemplate">
        <div  style="float:left;margin-right:100px">
            <h2>{{componentName}}剩余待办：{{todoTotal}}条</h2>
            <div class="todo-input">
                <input type="text" v-model.trim="todoNew">
                <button @click="todoAdd">添加</button>
            </div>
            <div class="todo-input">
                <input type="text" v-model.trim="searchText" @keyup.enter="search(searchText)" placeholder="回车查找">
                <button @click="search(searchText)">查找</button>
            </div>
            <ul>
                <li v-for="(todo,index) in todoList" :key="index">
                    <input v-model='todo.Checked' type="checkbox">
                    <input v-model='todo.Text' type="text" v-if="todo.Editable">
                    <label v-else :class="{completed:todo.Checked}">{{todo.Text|toUpper}}</label>
                    <button @click='editTodo(todo)' v-if="!todo.Editable">编辑</button>
                    <button v-else @click='saveTodo(todo)'>保存</button>
                    <button :disabled='todo.Editable' @click='todoRemove(todo)'>删除</button>
                </li>
            </ul>
        </div>


    </template>
    <script>

        // 注册
        Vue.component('my-todo', {
            template: "#todotemplate",
            props: {
                componentName: {
                    type: String,
                    required: true
                }
            },
            data: function () {
                return {
                    todoNew: '',
                    todoList: [],
                    searchText: '',
                    todoListAll: []
                }
            },
            methods: {
                todoAdd: function () {
                    //添加待办数据对象，包括text内容,completed完成状态,editable编辑状态三个属性
                    //添加后清空输入框
                    var todo = { Checked: false, Text: this.todoNew, Editable: false };
                    this.todoListAll.push(todo);
                    this.todoList = this.todoListAll;
                },
                todoRemove: function (todo) {
                    //删除待办数据
                    this.todoListAll.remove(todo);
                },
                editTodo: function (todo) {
                    //编辑待办数据
                    todo.Editable = true;
                },
                saveTodo: function (todo) {
                    todo.Editable = false;
                },
                search: function (text) {
                    this.todoList = [];
                    for (var i = 0; i < this.todoListAll.length; i++) {
                        if (this.todoListAll[i].Text.toUpperCase().indexOf(text.toUpperCase()) != -1) {
                            this.todoList.push(this.todoListAll[i]);
                        }
                    }
                }
            },
            filters: {
                toUpper: function (value) {
                    //按键文字切换，分别是「确认」和「编辑」，编辑中时「删除」按钮的状态为disable
                    // var _todoList = []
                    // for (var i = 0; i < list.length; i++) {
                    //     if (list[i].Text.indexOf(this.searchText) != -1) {
                    //         _todoList.push(list[i]);
                    //     }
                    // }
                    // return todoList;
                    return value.toUpperCase();
                }
            },
            computed: {
                todoTotal: function () {
                    var count = 0;
                    //todo:获取剩余待办数量
                    for (var i = this.todoList.length - 1; i >= 0; i--) {
                        if (!this.todoList[i].Checked) {
                            count++;
                        }
                    }
                    return count;
                }
            }
            
        });
        var todos = new Vue({
            el: '#todo2',
            data: {
                todoComponents: [],
                componentName: ""
            },
            methods: {
                addComponent: function (text) {
                    var component = { componentName: text };
                    this.todoComponents.push(component);
                }
            }
        });
        Array.prototype.remove = function (b) {
            var a = this.indexOf(b);
            if (a >= 0) {
                this.splice(a, 1);
                return true;
            }
            return false;
        };
    </script>
</body>

</html>
